import React from 'react';
import type { Meta, StoryObj } from '@storybook/react';
import { Button } from '../../components/ui/button';
import { Toaster } from '../../components/ui/toaster';
import { useToast } from '../../components/ui/use-toast';
import { Toast, ToastAction, ToastDescription, ToastTitle, ToastProvider, ToastViewport } from '../../components/ui/toast';

// 定义 meta 信息
const meta = {
  title: 'UI/Toast',
  component: Toast,
  tags: ['autodocs'],
  decorators: [(Story) => (
    <div>
      <Story />
      <Toaster />
    </div>
  )],
} satisfies Meta<typeof Toast>;

export default meta;
type Story = StoryObj<typeof meta>;

// 示例组件：展示如何使用 Toast
const ToastDemo = () => {
  const { toast } = useToast();
  
  return (
    <div className="flex flex-col gap-4">
      <Button 
        onClick={() => {
          toast({
            title: "默认提示",
            description: "这是一条默认提示信息",
          });
        }}
      >
        显示默认提示
      </Button>
      
      <Button 
        variant="destructive" 
        onClick={() => {
          toast({
            variant: "destructive",
            title: "错误提示",
            description: "操作失败，请重试",
          });
        }}
      >
        显示错误提示
      </Button>
      
      <Button 
        className="bg-yellow-500 hover:bg-yellow-600 text-white" 
        onClick={() => {
          toast({
            variant: "warning",
            title: "警告提示",
            description: "请注意，操作可能存在风险",
          });
        }}
      >
        显示警告提示
      </Button>
      
      <Button 
        variant="outline" 
        onClick={() => {
          toast({
            title: "新消息",
            description: "您有一条新消息",
            action: (
              <ToastAction altText="查看">
                查看
              </ToastAction>
            ),
          });
        }}
      >
        显示带操作的提示
      </Button>
    </div>
  );
};

// 默认示例
export const Default: Story = {
  render: () => <ToastDemo />
};

// 静态示例：展示不同类型的 Toast
export const ToastTypes: Story = {
  render: () => (
    <ToastProvider>
      <div className="space-y-4">
        <Toast>
          <div className="grid gap-1">
            <ToastTitle>默认提示</ToastTitle>
            <ToastDescription>这是一条默认提示信息</ToastDescription>
          </div>
        </Toast>
        
        <Toast variant="destructive">
          <div className="grid gap-1">
            <ToastTitle>错误提示</ToastTitle>
            <ToastDescription>操作失败，请重试</ToastDescription>
          </div>
        </Toast>
        
        <Toast variant="warning">
          <div className="grid gap-1">
            <ToastTitle>警告提示</ToastTitle>
            <ToastDescription>请注意，操作可能存在风险</ToastDescription>
          </div>
        </Toast>
        
        <Toast>
          <div className="grid gap-1">
            <ToastTitle>带操作按钮</ToastTitle>
            <ToastDescription>提供用户可执行的操作</ToastDescription>
          </div>
          <ToastAction altText="操作">操作</ToastAction>
        </Toast>
      </div>
      <ToastViewport />
    </ToastProvider>
  )
};

// 使用 useToast hook 的示例代码
export const UseToastExample: Story = {
  parameters: {
    docs: {
      source: {
        code: `
import { useToast } from "@gaudi-dev/space-component";

function MyComponent() {
  const { toast } = useToast();
  
  // 显示默认提示
  const showDefault = () => {
    toast({
      title: "默认提示",
      description: "这是一条默认提示信息",
    });
  };
  
  // 显示错误提示
  const showError = () => {
    toast({
      variant: "destructive",
      title: "错误提示",
      description: "操作失败，请重试",
    });
  };
  
  // 显示警告提示
  const showWarning = () => {
    toast({
      variant: "warning",
      title: "警告提示",
      description: "请注意，操作可能存在风险",
    });
  };
  
  // 显示带操作按钮的提示
  const showWithAction = () => {
    toast({
      title: "新消息",
      description: "您有一条新消息",
      action: (
        <ToastAction altText="查看">查看</ToastAction>
      ),
    });
  };
  
  return (
    <div>
      <Button onClick={showDefault}>显示默认提示</Button>
      <Button onClick={showError} variant="destructive">显示错误提示</Button>
      <Button onClick={showWarning} className="bg-yellow-500 hover:bg-yellow-600">显示警告提示</Button>
      <Button onClick={showWithAction} variant="outline">显示带操作的提示</Button>
    </div>
  );
}
`,
      },
    },
  },
  render: () => <ToastDemo />
};
